<template>
  <div>
    <template>

      <el-card class="box-card" v-for="(message,index) of wallMessage">
        <div slot="header" class="clearfix">
          <span>标题：{{ message.message_title }}</span>
          <span style="margin-left: 40px"><i class="el-icon-timer" style="margin-right: 3px"/>{{ message.message_time }}</span>
          <span style="margin-left: 40px"><i style="margin-right: 3px"
                                             class="el-icon-user-solid"/>{{ message.message_userName }}</span>
          <span style="margin-left: 40px"><i class="el-icon-location-outline"
                                             style="margin-right: 3px"/>{{ message.message_address }}</span>
          <span v-if="message.message_enable == 0" style="float: right;color: red">未审核</span>
          <span v-else style="float: right;color: greenyellow">通过审核</span>
        </div>
        <div>
          <span style="padding: 2px 4px;word-wrap:break-word;line-height: 25px;font-size: 20px">{{
              message.message_content
            }}</span>


          <el-button style="float: right;margin-top: 5px;margin-right: 30px;"
                     type="info"
                     class="el-icon-delete"
                     @click="deleteMyMessage(message.message_id)">删除
          </el-button>

          <el-button style="float: right;margin-top: 5px;margin-right: 30px"
                     type="text"
                     class="el-icon-success">点赞数{{ message.message_upNum }}
          </el-button>
          <el-collapse style="margin-top: 10px"
                       accordion
                       v-model="CommentCollapse"
                       @change="getComment">
            <el-collapse-item :name="message.message_id">
              <template slot="title">
                <el-button style="float: right; padding: 3px 0;" type="text">查看评论<i class="el-icon-more"/></el-button>
              </template>

              <el-card style="background-color: #8cc5ff" class="box-card" :user=user v-for="(comment) of comments"
                       :key="comment.comment_id"
                       v-if="commentsLen>0">
                <div slot="header" class="clearfix">
                  <span><i class="el-icon-timer" style="margin-right: 3px"/>{{ comment.comment_time }}</span>
                  <span style="margin-left: 40px"><i style="margin-right: 3px"
                                                     class="el-icon-user-solid"/>{{ comment.comment_userName }}</span>
                  {{ comment.userId }}
                  <el-button style="float: right;color: white; padding: 3px 0" type="text"
                             @click="deleteMyComment(comment.comment_id)"
                             v-show="user.user_id === comment.comment_userId">删除自己的评论
                  </el-button>
                </div>
                <div class="text item">
                  {{ comment.comment_content }}

                </div>
              </el-card>
              <el-card class="box-card" v-if="commentsLen == 0">
                <div class="text item">
                  <span style="text-align: center;margin: 2px auto;padding: 2px">这里啥也没留下ε=(´ο｀*)))唉</span>

                </div>
              </el-card>


            </el-collapse-item>
          </el-collapse>

        </div>
      </el-card>

    </template>

    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :pagesize="sizeNum"
        @current-change="getCurrentPageNum">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MyWallMessage",
  data() {
    return {
      pageNum: 1,
      sizeNum: 6,
      total: 100,
      wallMessage: {},
      CommentCollapse: "1",
      comments: {},
      commentsLen: 0,
      user: "",
      isLogin: true
    }
  },
  methods: {
    getCurrentPageNum(num) {
      this.pageNum = num;

      this.getRequest(this.$store.state.baseUrl+"/message/findMyAllMessage", {
        pageNum: this.pageNum,
        sizeNum: this.sizeNum,
        user_id:this.user.user_id

      }).then(resp => {
        if (resp) {
          this.wallMessage = resp.obj.messages;
          this.total = resp.obj.pages*10
        }
      })

    },

    getComment(val) {
      this.getRequest(this.$store.state.baseUrl+'/comment/findCommentToMessage', {
        message_id: val
      }).then(resp => {
        if (resp) {
          console.log(resp.obj)
          this.comments = resp.obj;

          this.commentsLen = resp.obj.length;
        }
      })
    },

    deleteMyMessage(message_id){
      if(this.beforeOperate()){
        this.deleteRequest(this.$store.state.baseUrl+'/message/deleteMyMessage',{
          message_id:message_id,
          user_id:this.user.user_id
        }).then(resp => {
          this.getCurrentPageNum(this.pageNum);
          this.$message({
            type:'success',
            message:'删除成功'
          })
        })
      }else {
        this.$router.push("/userLogin");
        this.$message("请先登录");
      }
    }


  },
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    this.getRequest(this.$store.state.baseUrl+"/message/findMyAllMessage", {
      pageNum: this.pageNum,
      sizeNum: this.sizeNum,
      user_id: this.user.user_id

    }).then(resp => {
      if (resp) {
        this.wallMessage = resp.obj.messages;
        this.total = parseInt(resp.obj.pages) * 10;
      }
    });


  },
  computed: {
    isMineComment(user_id) {
      return user_id == this.user.user_id;
    }
  }


}
</script>

<style scoped>

</style>
